<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>打字机效果</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="app">
      <div id="show-text" class="text51">你好，很高兴遇见你！</div>
    </div>

    <!-- 1、定义文字主体的样式，  white-space: nowrap 让文字不可换行，  overflow: hidden 隐藏溢出宽度的内容。 -->
    <!-- 2、定义 texteff51 动画，因为文字主体为10个汉字（包括标点），1个汉字宽度约等于 1 rem，
      所以这里的关键帧设置 width: 10rem ，然后在 animation 中定义参数 steps(10,start) 让文字内容一个一个出现。 -->
    <!-- 3、定义 lineeff51 动画，让右边框颜色从 rgba(0,0,0,0) 变为 rgba(0,0,0,0.4) 且循环播放，
      形成光标闪烁效果。 -->
  </body>

  <script>
    document.addEventListener("DOMContentLoaded", () => {
      const showText = document.getElementById("show-text");
      const textLength = showText.innerText.length;
      console.log("aaa", textLength);
      const headTag = document.getElementsByTagName("head")[0];
      const styleTag = document.createElement("style");
      headTag.appendChild(styleTag);
      styleTag.innerHTML = `@keyframes texteff51 {to {width: ${textLength}rem;}}`;
      showText.style.animation = `texteff51 5s steps(${textLength}, start) infinite, lineeff51 0.4s steps(2, start) infinite`;
      // document.styleSheets[0].insertRule(`@keyframes texteff51 {to {width: ${textLength}rem;}}`); // 无效
    });
  </script>
</html>
